<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div id="map"></div>

		<script src="assets/js/leaflet.js"></script>
		<script>
			let map = L.map("map", {
				zoom: 12,
				maxZoom: 18,
				center: [34.269701076858354, 108.94729614257814],
				preferCanvas: false,//是否使用 Canvas 来渲染 Path（路径）
				attributionControl: false,//去除右下角logo
				zoomControl: false, //去除左上角的放大缩小控件
			});
			L.tileLayer(
				"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
			).addTo(map);
			
			// 自定义logo，别忘记将map中attributionControl改为true，不然不显示
			const attribution = map.attributionControl;
			attribution.setPrefix('<img src="assets/img/car.png" style="width:10px;">');
			attribution.addAttribution(' <a href="https://www.baidu.com/">我是自定义的</a>');
		</script>
	</body>

</html>